"use client"
import Link from "next/link";
import { CircleCheckBig   } from 'lucide-react';
export default function Home() {
  const floor1 = [
    {
      title: "Fuel coupon",
      description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
      image: "https://picsum.photos/1600/900",
      link: "/fuel-coupon",
    },
    {
      title: "Fuel coupon",
      description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
      image: "https://picsum.photos/1600/900",
      link: "/fuel-coupon",
    },
    {
      title: "Fuel coupon",
      description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
      image: "https://picsum.photos/1600/900",
      link: "/fuel-coupon",
    },
    {
      title: "Fuel coupon",
      description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
      image: "https://picsum.photos/1600/900",
      link: "/fuel-coupon",
    },
    {
      title: "Fuel coupon",
      description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
      image: "https://picsum.photos/1600/900",
      link: "/fuel-coupon",
    },
    {
      title: "Fuel coupon",
      description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
      image: "https://picsum.photos/1600/900",
      link: "/fuel-coupon",
    },
    {
      title: "Fuel coupon",
      description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
      image: "https://picsum.photos/1600/900",
      link: "/fuel-coupon",
    },
    {
      title: "Fuel coupon",
      description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
      image: "https://picsum.photos/1600/900",
      link: "/fuel-coupon",
    },
  ]

  const floor2 = [
    {
      title: "Fuel coupon",
      description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
      image: "https://picsum.photos/400/500",
      link: "/fuel-coupon",
    },
    {
      title: "Fuel coupon",
      description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
      image: "https://picsum.photos/400/500",
      link: "/fuel-coupon",
    },
    {
      title: "Fuel coupon",
      description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
      image: "https://picsum.photos/400/500",
      link: "/fuel-coupon",
    },
    {
      title: "Fuel coupon",
      description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
      image: "https://picsum.photos/400/500",
      link: "/fuel-coupon",
    },
  ]

  const floor3 = [
    {
      title: "Success",
      desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
      color: "success",
    },
    {
      title: "Error",
      desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
      color: "error",
    },
    {
      title: "Warning",
      desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
      color: "warning",
    },
    {
      title: "Info",
      desc: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.",
      color: "info",
    },
  ]
  const floor4 = [
    {
      title: "Help center",
      arr: ["account management", "order", "payment & invoice", "delivery", "return", "other"]
    },
    {
      title: "About us",
      arr: ["about us", "contact us", "privacy policy", "terms of service", "cookie policy", "sitemap"]
    },
    {
      title: "Customer service",
      arr: ["account management", "order", "payment & invoice", "delivery", "return", "other"]
    },
    {
      title: "Payment methods",
      arr: ["account management", "order", "payment & invoice", "delivery", "return", "other"]
    },
  ]
  return (
    <div className="flex flex-col gap-16">
      <section>
        <div className="banner relative w-full aspect-[16/] md:aspect-[16/3] bg-[url(https://picsum.photos/1600/300)] bg-cover bg-center flex items-center">
          <div className="container text-white">
            <h1 className="h1 text-white">Fuel coupon</h1>
            <p className="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci numquam enim dolore quos praesentium exercitationem ut molestiae quam, quod nemo dolorum doloremque modi reprehenderit saepe, eligendi fugit assumenda obcaecati!</p>
          </div>
        </div>
      </section>
      <div className="container flex flex-col gap-16">
        <section>
          <h2 className="h2">We can help you</h2>
          <ul className="flex flex-col gap-4">
            <div className="flex flex-col md:flex-row gap-4 bg-white">
              <div className="flex-1 shrink-0">
                <img src="https://picsum.photos/1600/900" className="aspect-[16/9] object-cover" alt="" />
              </div>
              <div className="flex-1 shrink-0 flex flex-col justify-center items-center p-8">
                <h3 className="h3">Fuel coupon</h3>
                <br />
                <p className="p">Lorem ipsum dolor sit consectetur adipisicing elit. Adipisci numquam enim dolore quos praesentium exercitationem ut molestiae quam.</p>
                <br />
                <p className="p">Lorem ipsum dolor sit <Link href="#" className="link">Cartea</Link> consectetur adipisicing elit. Adipisci numquam enim dolore quos praesentium exercitationem ut molestiae quam, quod nemo dolorum doloremque!</p>
                <br />
                <button className="btn">Read more</button>
              </div>
            </div>
            <br />
            <div className="flex flex-col md:flex-row-reverse gap-4 bg-white">
              <div className="flex-1 shrink-0">
                <img src="https://picsum.photos/1600/900" className="w-full aspect-[16/9] object-cover" alt="" />
              </div>
              <div className="flex-1 shrink-0 flex flex-col justify-center items-center p-8">
                <h3 className="h3">Fuel coupon</h3>
                <p className="p">Lorem ipsum dolor sit consectetur adipisicing elit. Adipisci numquam enim dolore quos praesentium exercitationem ut molestiae quam.</p>
                <br />
                <p className="p">Lorem ipsum dolor sit <Link href="#" className="link">Cartea</Link> consectetur adipisicing elit. Adipisci numquam enim dolore quos praesentium exercitationem ut molestiae quam, quod nemo dolorum doloremque!</p>
                <br />
                <button className="btn">Read more</button>
              </div>
            </div>
          </ul>
        </section>
        <section>
          <h2 className="h2">Fuel coupon</h2>
          <ul className="grid grid-cols-12 gap-4">
            {floor3.map((item, index) => (
              <li key={index} className={`col-span-12 md:col-span-6 border ${item.color === "success" ? "border-success" : item.color === "error" ? "border-error" : item.color === "warning" ? "border-warning" : item.color === "info" ? "border-info" : ""} p-8 ${item.color === "success" ? "bg-success/10" : item.color === "error" ? "bg-error/10" : item.color === "warning" ? "bg-warning/10" : item.color === "info" ? "bg-info/10" : ""}`}>
                <h3 className={`h3 ${item.color === "success" ? "text-success" : item.color === "error" ? "text-error" : item.color === "warning" ? "text-warning" : item.color === "info" ? "text-info" : ""}`}>{item.title}</h3>
                <p className={`p ${item.color === "success" ? "text-success" : item.color === "error" ? "text-error" : item.color === "warning" ? "text-warning" : item.color === "info" ? "text-info" : ""}`}>{item.desc}</p>
                <br />
                <div className="flex gap-4 justify-end">
                  <button className={`btn ${item.color === "success" ? "btn--success" : item.color === "error" ? "btn--error" : item.color === "warning" ? "btn--warning" : item.color === "info" ? "btn--info" : ""} btn--outline`}>Cancel</button>
                  <button className={`btn ${item.color === "success" ? "btn--success" : item.color === "error" ? "btn--error" : item.color === "warning" ? "btn--warning" : item.color === "info" ? "btn--info" : ""}`}>Confirm</button>
                </div>
              </li>
            ))}
          </ul>
          <br />
          <br />
          <br />
          <div className="text-center">
            <CircleCheckBig className="inline-block text-primary" size={88} />
            <br />
            <br />
            <h3 className="text-text font-semibold">Success alert title</h3>
            <p className="font-thin">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
          </div>
          <br />
          <br />
        </section>
        <section>
          <h2 className="h2">Fuel coupon</h2>
          <ul className="grid grid-cols-12 gap-4">
            {floor1.map((item, index) => (
              <li key={index} className="card--hover card--active col-span-6 md:col-span-3 flex flex-col gap-2 bg-white">
                <Link href={`/article`}>
                  <img src={item.image} className="w-full aspect-[16/9] object-cover" alt={item.title} />
                  <div className="p-8">
                    <h3 className="h3">{item.title}</h3>
                    <p className="p">{item.description}</p>
                  </div>
                </Link>
              </li>
            ))}
          </ul>
        </section>
        <section>
          <h2 className="h2">h2标题</h2>
          <ul>
            <li></li>
          </ul>
          <ul className="grid grid-cols-12 gap-4">
            {floor2.map((item, index) => (
              <li key={index} className="card--hover card--active relative col-span-6 md:col-span-3 flex flex-col gap-2">
                <Link href={`/article`}>
                  <img src={item.image} className="w-full aspect-[4/5] object-cover" alt={item.title} />
                  <div className="absolute bottom-0 left-0 w-full h-[fit-content] bg-black/60 text-white p-8">
                    <h3 className="h3 text-white">{item.title}</h3>
                    <p>{item.description}</p>
                  </div>
                </Link>
              </li>
            ))}
          </ul>
        </section>
      </div>
      <section className="bg-white py-16">
        <div className="container">
          <ul className="grid grid-cols-12 gap-4">
            {floor4.map((item, index) => (
              <li key={index} className="col-span-6 md:col-span-3">
                <h3 className="h3">{item.title}</h3>
                <br />
                <ul className="flex flex-col gap-2">
                  {item.arr.map((item, index) => (
                    <li key={index}>{item}</li>
                  ))}
                </ul>
              </li>
            ))}
          </ul>
        </div>
      </section>
      <section>
        <p className="text-center">©copyright <Link href="#" className="link">Cartea</Link> 2025</p>
        <br />
      </section>
    </div>
  );
}